<template>
  <div class="h-full w-full">
    <el-container class="h-full">
      <!-- 侧边栏：宽度由 Collapse 状态决定 -->
      <el-aside :width="ContAsideWidth" class="bg-gray-100/19 text-#333 flex items-center justify-center text-16px font-normal h-full">
        <MainAsideCont />
      </el-aside>

      <el-container>
        <!-- 顶栏 -->
        <el-header class="bg-white text-#141515 flex items-center justify-center text-18px font-bold mb-[-6px] "
        >
          <MainHdrCont />
        </el-header>

        <!-- 标签栏 -->
        <MainTagsCont/>

        <!-- 主内容 -->
        <el-main class="bg-white text-#333 p-20px text-14px  !ml--5"
        > 
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted } from 'vue'
import MainAsideCont from '@/components/MainAsideCont.vue'
import MainHdrCont from '@/components/MainHdrCont.vue'
import MainTagsCont from '@/components/MainTagsCont.vue'
import { useAllDataStore } from '@/stores'

const store = useAllDataStore()
const ContAsideWidth = computed(() => store.isCollapse ? '60px' : '180px')

onMounted(() => {
  // ReloadData()
})
</script>
